<template>
  <div style="width: 700px;margin: 0 auto">
    <el-row :gutter="20">
      <el-col :span="4">
        <h3>家:</h3>
      </el-col>
      <el-col :span="16">
        <el-select v-model="value" placeholder="请选择" style="width: 460px">
          <el-option
              v-for="item in userAddress"
              :key="item.addressId"
              :label="item.detailAddress"
              :value="item.addressId">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="defaultAddress">确定</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4">
        <label>新增地址:</label>
      </el-col>
      <el-col :span="16">
        <el-input v-model="userForm.detailAddress" @focus="handleAddress"></el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="AddAddress">确定</el-button>
      </el-col>
    </el-row>
    <el-dialog title="地址" :visible.sync="showAddressDialog" width="80%" >
      <div style="height: 450px">
        <Map ref="map" @updateLocation="updateLocation" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddressDialog = false">取 消</el-button>
        <el-button type="primary" @click="setMapAddrToAddress">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Map from "@/components/OrganicBody/AMapSearch.vue";

export default {
  name: 'UpdateAddress',
  components: {Map},
  props: {},
  data () {
    return {
      user:this.$store.state.user,
      value:'',
      userAddress:[],
      MapAddr:'',
      Addr:'',
      showAddressDialog: false,
      userForm:{
        consumerId:'',
        address:'',
        detailAddress:'',
        lng:'',
        lat:''
      }
    }
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    intAddress(){
      this.$axios.get('http://localhost:8090/user-address/getAddressById?consumerId=' + this.user.consumerId).then(({ data }) => {
        if(data !== null && data !== undefined ){
          this.userAddress = data;
          this.user.userAddress = this.userAddress;
          this.$store.commit('initUser', this.user)
        }
      })
    },
    defaultAddress(){
      for (let i = 0; i < this.userAddress.length; i++){
        if(this.userAddress[i].addressId === this.value){
          this.userAddress[i].isDefault = 1;
        }else {
          this.userAddress[i].isDefault = 0;
        }
      }
      this.$axios.post('http://localhost:8090/user-address/updateAddress',this.userAddress).then(({ data }) => {
        if(data){
          this.$notify({
            title: '提示',
            message: '设置成功',
            type: 'success'
          })
          this.intAddress()
          this.userAddress = [];
        }else if(data === false){
          this.$notify({
            title: '提示',
            message: '设置失败',
            type: 'warning'
          })
        }
      })
    },
    handleAddress(){
      this.showAddressDialog = true;
    },
    // 点击地图后得到位置信息
    updateLocation(Addr) {
      this.MapAddr = Addr;
      console.log(Addr)
    },
    setMapAddrToAddress(){
      let address = this.MapAddr.province+'-'+this.MapAddr.city+'-'+this.MapAddr.district;
      let detailAddress = this.MapAddr.orgAddr;
      this.userForm.address = address;
      this.userForm.detailAddress = detailAddress;
      this.userForm.lng = this.MapAddr.lon;
      this.userForm.lat = this.MapAddr.lat;
      this.userForm.consumerId = this.user.consumerId;
      this.showAddressDialog = false;
    },
    AddAddress(){
      this.$axios.post('http://localhost:8090/user-address/AddAddress',this.userForm).then(({ data }) => {
        if(data){
          this.$notify({
            title: '提示',
            message: '添加成功',
            type: 'success'
          })
          this.intAddress()
        }else if(data === false){
          this.$notify({
            title: '提示',
            message: '添加失败',
            type: 'warning'
          })
        }
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.intAddress()
  },
  // 生命周期 - 创建之前
  beforeCreate () {},
  // 生命周期 - 挂载之前
  beforeMount () {},
  // 生命周期 - 更新之前
  beforeUpdate () {},
  // 生命周期 - 更新之后
  updated () {},
  // 生命周期 - 销毁之前
  beforeDestroy () {},
  // 生命周期 - 销毁完成
  destroyed () {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated () {}
}
</script>

<style scoped>

</style>
